<template>
	<div class="form-designer-palette">
		<el-row>
				<el-col :span="8" v-for="(colItem,index) in componentItems" :key="index"
					style="padding-top: 5px;width:100%;">
					<div class="form-designer-palette-item">
						<i :class="colItem.icon"></i>
						<div>{{colItem.label}}</div>
						<i class="el-icon-circle-plus-outline yun-plus-icon" @click="onIconClickHandler(colItem)"></i>
					</div>
				</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "Palette",
		components: {
			
		},
		data() {
			return {
				componentItems: [{
						"label": "标签",
						"type": "label",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "文本",
						"type": "text",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "数字",
						"type": "number",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "下拉",
						"type": "select",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "查询",
						"type": "search",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "日期时间",
						"type": "datetime",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "日期",
						"type": "date",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "时间",
						"type": "time",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "图片",
						"type": "image",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "按钮",
						"type": "button",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "表格",
						"type": "table",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "表格列",
						"type": "tablecolumn",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "页签",
						"type": "tabcontrol",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "页签页",
						"type": "tabpage",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "行",
						"type": "row",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "列",
						"type": "col",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "文本域",
						"type": "textarea",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "隐藏域",
						"type": "hidden",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "图标",
						"type": "icon",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "Div",
						"type": "div",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "组标题",
						"type": "grouptitle",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "复选框",
						"type": "checkbox",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "树",
						"type": "tree",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "Switch",
						"type": "switch",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "Tag",
						"type": "tag",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "公式",
						"type": "formula",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "汇总字段",
						"type": "rollupsummary",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "工作流步骤",
						"type": "workflowsteps",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "链接纪录",
						"type": "linkrecord",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "柱状图",
						"type": "vbarchart",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "条形图",
						"type": "hbarchart",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "饼图",
						"type": "piechart",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "折线图",
						"type": "linechart",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "指标图",
						"type": "indicatortable",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "WebSocket",
						"type": "websocket",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "UReport2",
						"type": "ureport2",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "快捷菜单",
						"type": "shortcutmenu",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "Dashboard页",
						"type": "dashboardpage",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "单选框列表",
						"type": "radiolist",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "复选框列表",
						"type": "checkboxlist",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					},
					{
						"label": "颜色选择",
						"type": "color",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "仪表盘",
						"type": "gauge",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "明细报表",
						"type": "detailreport",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}, {
						"label": "汇总报表",
						"type": "summaryreport",
						"icon": "el-icon-folder-remove",
						"propertyMap": {},
						"children": []
					}
				],
			}
		},
		methods: {
			onIconClickHandler(item) {
				this.$emit("addComponent", item.type);
			}
		},
	}
</script>

<style>

</style>
